<template>
    <div>
        <div>

            <el-table
                    :data="classificationList"
                    border
                    @row-click="columnListener"
                    :row-key="classificationList.cid"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column prop="cid" label="cid" width="300px">
                </el-table-column>
                <el-table-column prop="ccid" :formatter="formatter1" label="父级" width="300px">
                </el-table-column>
                <el-table-column prop="name" label="名称" width="300px">
                </el-table-column>

                <el-table-column fixed="right" label="操作" width="300px">
                    <template slot-scope="scope" v-if="scope.row.cid !==-1">
                        <el-button type="text" size="small" @click="btn_change(1)">编辑</el-button>
                        <el-button type="text" size="small" @click="btn_change(3)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="margin-top: 2%">
            <el-row>
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <div style="flex: 1">
                        <h3>试着批量操作?</h3>
                        <el-button type="text" size="small" style="margin-left: 3%" @click=btn_batch(1)>删除</el-button>
                        <p style="font-size: 10px">ps: 删除父分类,默认会连带自带类删除</p>
                    </div>
                </el-col>
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">

                    <!--        编辑分类-->
                    <div style="padding: 2% 2% 2% 5%;margin: 1%;margin-right: 0;" class="shadow"
                         v-if="displayFlag">
                        <h3>编辑分类</h3>
                        <p>ps: ...代表无父类</p>
                        <el-form style="margin-top: 3%;width: 50%" :model="editedResults" ref="form" label-width="80px">
                            <el-form-item label="父级分类" style="">
                                <el-select v-model="editedResults.ccid" placeholder="请选择活动区域">
                                    <el-option label="..." value="0"/>
                                    <el-option :label="item.name" :value="item.cid"
                                               v-for="item in fatherClassificationList"/>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="分类名称">
                                <el-input v-model="editedResults.name"/>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="btn_save()">保存</el-button>
                                <el-button @click="btn_cancel()">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-col>
            </el-row>
        </div>

    </div>
</template>

<script>
    let that;
    export default {
        name: "List",
        data() {
            return {
                classificationList: [],
                checkedArticles: [],//选中的文章
                flag: 0,//这个用于判断来干嘛

                displayFlag: false,//用于是否显示编辑界面
                editedResults: {//编辑后的结果
                    cid: 0,
                    ccid: 0,
                    name: ''
                },
                fatherClassificationList: [],

                flag1: -1//用于删除提示
            }
        },

        mounted() {
            that = this;
            that.$Axios(that.$store).post(that.CLASSIFICATION_API + "/list")
                .then(function (result) {
                    let data = result.data.data;
                    that.classificationList = data;
                });
        },

        methods: {
            btn_cancel() {
                that.displayFlag = false;
            },
            btn_save() {
                that.$Axios(that.$store).post(that.CLASSIFICATION_API + '/save_and_update', that.editedResults)
                    .then(function (result) {
                        that.$router.go(0);
                    });
            },
            btn_batch(e) {
                let json = [];
                that.checkedArticles.forEach(o => {
                    json.push(o.cid);
                });
                if (e === 0) {

                } else if (e === 1) {
                    //    批量删除
                    if (that.flag1 === -1) {
                        that.$notify({
                            title: '警告',
                            message: '当前操作不可逆,确认后请再次点击删除',
                            type: 'warning'
                        });
                        that.flag1 = -2;
                    } else if (that.flag1 === -2) {
                        that.$Axios(that.$store).post(that.CLASSIFICATION_API + "/delete", json)
                            .then(function (result) {
                                that.$router.go(0);
                            });
                        that.flag1 = -1;

                    }
                }
            },
            //格式化数据
            formatter1(row, column) {
                if (row.ccid === 0) {
                    return '...';
                }
                if (row.ccid === -1) {
                    return '.';
                }

                let classificationList = that.classificationList;
                for (let i = 0; i < classificationList.length; i++) {
                    let classificationListElement = classificationList[i];
                    if (row.ccid === classificationListElement.cid) {
                        return classificationListElement.name;
                    }
                }
            },
            //这里面对列进行了所有的操作
            columnListener(row, event, column) {
                if (that.flag === 0) {
                    console.log("正常")
                } else if (that.flag === 1) {
                    //编辑
                    that.displayFlag = true;
                    //    获取所有的父分类
                    that.$Axios(that.$store).get(that.CLASSIFICATION_API + "/father")
                        .then(function (result) {
                            that.fatherClassificationList = result.data.data;
                        });
                    that.editedResults = row;
                } else if (that.flag === 3) {
                    //删除
                    if (that.flag1 !== row.aid) {
                        that.$notify({
                            title: '警告',
                            message: '当前操作不可逆,且会将相关的文章移到废纸篓且会将文章分类改为其他,确认后请再次点击删除',
                            type: 'warning'
                        });
                        that.flag1 = row.aid;
                    } else {
                        that.flag = -1;
                        let json = [
                            row.cid
                        ];
                        that.$Axios(that.$store).post(that.CLASSIFICATION_API + "/delete", json)
                            .then(function (result) {
                                that.$router.go(0);
                            });

                    }

                }
            },

            btn_change(e) {
                that.flag = e;
            },
            handleSelectionChange(val) {
                that.checkedArticles = val;
            },

            handleClick(row) {
                console.log(row);
            }
        },
    }
</script>

<style scoped src="../../../static/md/markdown.css">

</style>